<!DOCTYPE html>
<html lang="en">
  <head>
    <title>crayon - animation example</title>
    <meta charset="utf-8">
  </head>
  <body style="background-color: #888;">
    <div>
      <button id="attack">Attack</button> <button id="enrage">Enrage</button> <button id="damage">Take Damage</button> <button id="hover">Toggle Hover</button> <button id="side">Toggle Side</button> <button id="incorporeal">Toggle Incorporeal</button>
    </div>
    <canvas id="my-canvas" width="400" height="400"></canvas>

    <script src="../crayon.js"></script>
    <script>

      crayon.assets.preload('img/animation.png', function(){

        var canvas = new crayon.Canvas({ id: "my-canvas" });

        var hover = true;
        var side = 1;
        var incorporeal = false;

        var point = new crayon.Point(200, 200);

        var sprite = new crayon.Sprite({
          src: 'img/animation.png',
          position: point,
          snap: true,
          z: 1,
          width: 198,
          height: 166,
          anchorX: 76,
          anchorY: 125,
          anchorInPixels: true
        });

        sprite.addAnimation('idle', 12, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]); // define default idle animation on frames 0 to 16
        sprite.addAnimation('attack', 12, [17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]); // define attack animation on frames 17 to 29

        sprite.animate('idle', true); // no argument triggers 'idle' by default

        canvas.add(sprite);

        var tile = new crayon.CustomShape({
          x: 200,
          y: 200,
          color: new crayon.Color(0,255,0,0.25),
          stroke: 2,
          strokeColor: "#0f0"
        });

        tile.moveTo(-64, 0);
        tile.lineTo(0, -32);
        tile.lineTo(64, 0);
        tile.lineTo(0, 32);
        tile.close();

        canvas.add(tile);

        document.getElementById('attack').onclick = function(){
          sprite.animate('attack');
        }

        document.getElementById('enrage').onclick = function(){
          sprite.stop();
          sprite.removeFilter();

          sprite.transform({
            duration: 200,
            transition: 'easeIn',
            from: {
              scaleX: side,
              scaleY: 1
            },
            to: {
              scaleX: 1.3 * side,
              scaleY: 1.3
            },
            custom: function(stage){
              this.filter('colorOverlay', new crayon.Color(255, 0, 0, (stage) * 0.2));
            }
          }).on('end', function(){
            sprite.transform({
              duration: 800,
              transition: 'easeOut',
              to: {
                scaleX: side,
                scaleY: 1
              },
              custom: function(stage){
                this.filter('colorOverlay', new crayon.Color(255, 0, 0, (1-stage) * 0.2));
              }
            });
          });
        }

        document.getElementById('damage').onclick = function(){
          sprite.stop();
          sprite.set({
            scaleX: side,
            scaleY: 1
          });

          sprite.transform({
            duration: 500,
            transition: 'easeIn',
            custom: function(stage){
              this.filter('colorOverlay', new crayon.Color(255, 0, 0, (1-stage) * 0.75));
            }
          });
        }

        document.getElementById('hover').onclick = function(){
          if(hover){
            sprite.set({
              y: 200
            });
            hover = false;
          }else{
            hover = true;
          }
        }

        document.getElementById('side').onclick = function(){
          side *= -1;
          sprite.set('scaleX', side);
        }

        document.getElementById('incorporeal').onclick = function(){
          if(incorporeal){
            incorporeal = false;
            sprite.set('src', 'img/animation.png');
          }else{
            incorporeal = true;
            sprite.set('src', crayon.assets.get('img/animation.png').cached('incorporeal'));
          }
        }

        crayon.timer.on('frame', function(time) {

          var t = time / 1000;
          var sin = Math.sin(t * 2);

          if(hover){
            point.move(null, 175 + sin * 10);
          }
        });

      });

    </script>
  </body>
</html>